import {Link} from "react-router-dom";
import {PostAuthor} from "../users/postAuthor";
import {useGetPostQuery} from "../api/apiSlice";
import {Spinner} from "../../components/Spinner";
import {TimeAgo} from "./TimeAgo";
import {ReactionButtons} from "./ReactionButtons";

export const SinglePostPage = (match) => {
  const { postId } = match.match.params

  // const post = useSelector(state => selectPostById(state, postId))
  const { data: post, isFetching, isSuccess } = useGetPostQuery(postId)

  let content

  if (isFetching) {
    content = <Spinner text="Loading..."/>
  } else if (isSuccess) {
    content = (
      <article className="post">
        <h2>{post.title}</h2>
        <div>
          <PostAuthor userId={post.userId}></PostAuthor>
          <TimeAgo timestamp={post.date}></TimeAgo>
        </div>
        <p className="post-content">{post.content}</p>
        <ReactionButtons post={post}></ReactionButtons>
        <Link to={`/editPost/${post.id}`} className="button">
          Edit Post
        </Link>
      </article>
    )
  }

  // if (!post) {
  //   return (
  //     <section>
  //       <h2>page not found</h2>
  //     </section>
  //   )
  // }

  return (
    <section>
      {content}
      {/*<article className="post">*/}
      {/*  <h2>{post.title}</h2>*/}
      {/*  <p className="post-content">{post.content}</p>*/}
      {/*  <PostAuthor userId={post.userId}></PostAuthor>*/}
      {/*  <Link to={`/editPost/${post.id}`} className="button">*/}
      {/*    Edit Post*/}
      {/*  </Link>*/}
      {/*</article>*/}
    </section>
  )
}
